<template>
<view>
	<view class="car-tatos">
		<view class="add-top-car" v-if="carShow">
			<image :src="imgPath.mine_tcyk" />
			<view>添加车辆</view>
		</view>
		<view class="number">
			<view :class="[activeIndex==index?'number-grid-active':'']" class="number-grid" v-for="(item,index) in numlist"
				:key="index" @click="openKeyboard(index)">
				{{item||''}}
				<view 
				class="txt-ellipsis"
				:class="[index == 7 ? 'new-number' : '',activeIndex == 7 || activeIndex == 8 ? 'new-number-active' : '']"
					v-if="index == 7">新能源</view>
			</view>
			<!-- <view class="number-new" v-if="!showNew"   @click="showNewF" >新能源</view> -->
		</view>
		<!-- <view v-if="!onlyInput&&phonenum" class="carPhone">
			<view class="phone">
				<view>手机号</view>
				<input class="phone-1" bind:input="changePhone" :value="phonenum" disabled type="number"
					placeholder="请输入您的手机号" />
			</view>
			<view class="code">
				<view>验证码</view>
				<input class="code-1" type="number" :value="smsCode" @input="changeCode" placeholder="请输入验证码" />
				<view class="getCode">
					<text v-if="!isshow" @click="send">获取验证码</text>
					<text v-else>{{time}}秒重新获取</text>
				</view>
			</view>
		</view>
		<button v-if="!onlyInput" class="confirm-button" @click="submitNumber">确定</button> -->
	</view>
	<view class="keyboard" v-if="KeyboardState">
		<view class="keyboardClose">
			<view class="keyboardClose_btn" @click='closeKeyboard'>完成</view>
		</view>
		<!-- 省份简写键盘 -->
		<view class="keyboard-item" v-if="activeIndex == 0">
			<view :class="[(numbers.length - 1) === index ? 'keybard-flex' : '']" class="keyboard-line"
				v-for="(item,index) in provinces" :key="index">
				<view class="keyboard-btn" v-for="(itemlist,indexs) in item" :key="indexs" @click='bindChoose(itemlist)'>
					{{itemlist}}</view>
				<view class="keyboard-del" @click='bindDelChoose' v-if="(numbers.length - 1) === index">
					<image style="width: 135rpx;height: 97rpx;" :src="imgPath.parking_del"></image>
				</view>
			</view>
		</view>
		<!-- 车牌号码选择键盘 -->
		<view class="keyboard-item" v-else>
			<view :class="[(numbers.length - 1) === index ? 'keybard-flex' : '']" class="keyboard-line"
			v-for="(item,index) in numbers" :key="index">
			
				<view v-for="(item1,index1) in item" :key="index1" @click.stop='bindChoose(item1)'>
					<view
						v-if="(activeIndex >= 1 && activeIndex <= 5) 
						&& (item1 === '警' || item1 === '学' || item1 === '港' || item1 === '澳')"
						class="keyboard-btn forbid">{{item1}}</view>
					<view v-else class="keyboard-btn" >{{item1}}</view>
				</view>
				
				<view class="keyboard-del" v-if="(numbers.length - 1) === index" @click.stop='bindDelChoose(item)'>
					<image style="width: 135rpx;height: 97rpx;" :src="imgPath.parking_del"></image>
				</view>
				
			</view>
		</view>
				
	</view>
</view>
</template>

<script>
	import  { imgPath } from '@/static/imgPath.js'
	export default {
		name: "parkPlatkeyWord",
		props: {
			onlyInput: { //
				type: [Boolean],
				default: () => {
					return false
				}
			},
			carnums: { //
				type: [String],
				default: () => {
					return ''
				}
			},
			carShow: { //
				type: [Boolean],
				default: () => {
					return false
				}
			},
			numlists: { //
				type: [Array],
				default: () => {
					return new Array(8)
				}
			},
		},
		data() {
			return {
				imgPath,//图片地址
				carnum:'',
				numlist:new Array(8),
				// 省份简写
				provinces: [
					['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏'],
					['浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼'],
					['川', '贵', '云', '陕', '甘', '青', '蒙', '桂', '宁', '新'],
					['藏', '使', '领', '警', '学', '港', '澳'],
				],
				// 车牌输入
				numbers: [
					["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
					["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"],
					["L", "M", "N", "P", "Q", "R", "S", "T", "U", "V"],
					["W", "X", "Y", "Z", "警", "学", "港", "澳"]
				],
				KeyboardState: false,
				phonenum: '', //手机号
				plateNumber: '', //车牌号
				smsCode: '', //手机验证码 
				time: 60, // 获取验证码倒计时
				isshow: false,
				explain: '普通车辆',
				activeColor: '#0072FF',
				activeBG: 'linear-gradient(180deg, #00C6FF, #0072FF)',
				activeIndex: 1,
				showNew: false
			};
		},
		watch:{
			carnums(val){
				console.log('carnums',val)
				this.carnum = val
			}
		},
		mounted() {
			this.carnum = this.carnums
			console.log('this.numlist',this.numlist)
			this.show()
			this.clearData()
		},
		methods: {
			initData(data) {
				if (data == '') {
						return
				}
				let numlist = data && data.split('') ? data.split('') : []
				let showNews = false
				if (numlist.length == 7) {
						numlist.push('')
				}
				this.numlist = numlist
				this.showNew = showNews
				this.activeIndex = numlist.length - 1
				console.log('initData')
			},
			changeColor(event) {
				if (event.detail.value.length == 8) {
					this.explain = '新能源'
					this.activeColor = '#00A213'
					this.activeBG = 'linear-gradient(180deg, #00EA58, #00A213)'
				} else {
					this.explain = '普通车辆'
					this.activeColor = '#0072FF'
					this.activeBG = 'linear-gradient(180deg, #00C6FF, #0072FF)'
				}
				this.carnum = event.detail.value
				if (this.onlyInput) {
					this.$emit("transfer", {
						value: event.detail.value.toUpperCase(),
						selectCartList: this.numlist
					})
				}
			},

			/* 验证码输入 */
			changeCode(e) {
				this.smsCode = e
			},

			/* 手机号输入 */
			changePhone(e) {
				this.phonenum = e
			},

			/* 选中点击设置 */
			bindChoose(e) {
				console.log('this.carnum.length',this.carnum.length)
				console.log('this.activeIndex',this.activeIndex)
				console.log(e)
				if (this.carnum.length > 7 && this.activeIndex > 7) {
					return
				}
				if ((this.activeIndex >= 1 && this.activeIndex <= 5) && (e === '警' || e === '学' || e === '港' || e ===
						'澳')) {
					return
				}
				if (this.activeIndex > 7) {
					return
				}
				this.numlist[this.activeIndex] = e
				this.activeIndex++
				this.numlist = this.numlist
				this.activeIndex = this.activeIndex
				this.changeColor({
					detail: {
						value: this.numlist.join('')
					}
				})
				this.$emit("inputData", this.numlist.join(''))
			},

			bindDelChoose() {
				// 先判断当前位置是否有数据，有数据就删除，没数据就删除上一个
				if (this.numlist[this.activeIndex]) {
					this.numlist[this.activeIndex] = null
					this.carnum = this.numlist.join('')
					this.numlist = [...this.numlist]
					if (this.onlyInput) {
						this.$emit("transfer", {
							value: this.carnum.toUpperCase(),
							selectCartList: this.numlist
						})
					}
					return
				}
				this.numlist[this.activeIndex - 1] = null
				if (this.activeIndex) {
					this.activeIndex--
				}
				this.carnum = this.carnum.slice(0, -1)
				this.numlist = [...this.numlist]
				this.activeIndex = this.activeIndex
				if (this.onlyInput) {
					this.$emit("transfer", {
						value: this.carnum.toUpperCase(),
						selectCartList: this.numlist
					})
				}
			},

			closeKeyboard() {
				this.KeyboardState = false
				this.$emit("chidshow", true)
				console.log('closeKeyboard',this.KeyboardState)
			},
			show() {
				this.KeyboardState = true
				let carnums = this.carnums.split(',')
				let numlist = JSON.parse(JSON.stringify(this.numlist))
				carnums.map((item,index)=>{
					numlist[index] = item
				})
				this.phonenum = uni.getStorageSync('userInfo').phone
				this.numlist = JSON.parse(JSON.stringify(numlist))
				console.log('show',this.numlist)
			},
			hide() {
				this.KeyboardState = false
				console.log('hide',this.KeyboardState)
			},
			openKeyboard(e) {
				this.KeyboardState = true,
				this.activeIndex= e
				this.$emit("chid", true)
				console.log('openKeyboard',this.KeyboardState)
			},
			/* 发送验证码 */
			send() {
				let that = this
				/* 验证是否输入手机号*/
				if (!that.phonenum) {
					this.$u.toast('请输入手机号');
					return
				}

				/* 验证手机号是否正确 */
				let reg = /1[3,4,5,7,8][0-9]{9}$/;
				if (!reg.test(this.phonenum)) {
					this.$u.toast('手机号格式不正确');
					return
				}

				/* 验证是否输入车牌号*/
				if (!this.carnum) {
					this.$u.toast('请输入车牌号');
					return
				}

				/* 验证是否正确输入车牌号*/
				let regStr =
					/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/

				if (!regStr.test(this.carnum)) {
					this.$u.toast('请正确输入车牌号');
					return
				}

				verifySmsCode({
					phoneNo: this.phonenum,
					plateNo: this.carnum.toUpperCase()
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '发送成功',
							icon: 'success'
						})
						this.isshow = true
						timer = setInterval(() => {
							this.time = this.time -= 1
							if (this.time <= 0) {
								this.isshow = false
								this.time = 60
								clearInterval(timer)
								timer = null
							}
						}, 1000)
					} else {
						if (res.code == 3101 || res.code == 3102 || res.code == 3103) {
							let obj = Object.assign({}, res, {
								phonenum: that.carnum.toUpperCase()
							})
							this.triggerEvent("verifySubmit", obj)
						} else {
							this.$u.toast(res.msg);
						}

					}
				})

			},
			showNewF() {
				this.numlist.push('')
				this.showNew = true
				this.numlist = this.numlist
			},
			clearData() {
				let initNumlist = new Array(8)
				initNumlist[0] = this.$configApi.CARD_NO_FIRST_WORD 
				this.activeIndex = initNumlist[0] ? 1 : 0
				this.carnum = this.$configApi.CARD_NO_FIRST_WORD
				this.numlist = JSON.parse(JSON.stringify(initNumlist))
				this.showNew = false
				this.smsCode = ''
				console.log('clearData',this.numlist)
			},
			// 提交车牌号码
			submitNumber() {
				// 触发父组件方法
				this.$emit("confire", {
					phonenum: this.phonenum,
					smsCode: this.smsCode,
					plateNumber: this.carnum.toUpperCase()
				})
			}
		}
	}
</script>

<style lang="less">
.number {
    height: 140rpx;
    width: 670rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* box-shadow: var(--linzq-shadow); */
    /* border-radius: var(--linzq-radius); */
    margin: 30rpx auto 5rpx;
    /* margin-top: 50rpx; */
}

.number-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.forbid {
    background-color: #999999 !important;
    color: gray;
}

.number-2 {
    width: 50%;
    font-size: 40rpx;
    display: flex;
    align-items: center;
}

.number .number-grid {
    width: 70rpx;
    height: 100rpx;
    background: #E3E3E3FF;
    font-size: 52rpx;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 5rpx;
}
.number-grid .new-number {
    /* width: 250rpx;
    height: 25rpx; */
    position: absolute;
    font-size: 18rpx;
    color: #ffffff;
    width: 70rpx;
    border-radius: 15rpx;
    font-weight: 200;
    top: -15rpx;
    left: 0rpx;
		text-align: center;
    /* background-color: #4acd4a; */
    background-color: #CFCFCF;
}
.number-grid .new-number-active {
    background-color: #4acd4a !important;
}
.number .number-grid-active {
    background: #00C6FF20;
    border: solid 2rpx #00C6FF;
    border-radius: 5rpx;
    color: rgba(0, 0, 0, .18);
}

.number .number-new {
    width: 70rpx;
    height: 100rpx;
    background: #C2FFC8FF;
    font-size: 20rpx;
    color: #00b400;
    display: flex;
    justify-content: center;
    align-items: center;
}
.car-tatos {
    padding-bottom: 25rpx;
}

.number-3{
    text-align: right;
    width: 20%;
    font-size:26rpx;
}



.carPhone {
    margin: 30rpx;
    font-size: 32rpx;
}

.carPhone .phone {
    display: flex;
    padding-bottom: 22rpx;
    border-bottom: 1rpx solid #e4e4e4;
    margin-bottom: 22rpx;
    
}

.phone-1{
    width: 466rpx;
    margin-left: 60rpx;
}



.carPhone .code {
    display: flex;
    align-items: center;
    padding-bottom: 22rpx;
    border-bottom: 1rpx solid #e4e4e4;
    justify-content: space-between;
}

.code-1{
    width: 300rpx;
}

.carPhone .code .getCode {
    background: #2770FE;
    font-size: 26rpx;
    color: #fff;
    padding: 8rpx;
    border-radius: 16rpx;
}

.parking-confirm-btn {
    background: linear-gradient(45deg, #00C6FF, #0072FF);
    border-radius: 50rpx;
    font-size: 32rpx;
    color: #ffffff;
    margin: 40rpx;
}

.popup-foot {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.popup-foot .cancel {
    font-size: 36rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color: #999999;
}

.popup-foot .sure {
    font-size: 34rpx;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    color: #4240ff;
}

/* 虚拟键盘 */
.keyboard {
    height: auto;
    background: #efefef;
    position: fixed;
    bottom: 0rpx;
    width: 100%;
    left: 0;
    z-index: 9999;
}

.add-top-car {
    border-bottom: 1PX solid #EEEEEE;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 25rpx 0 0 25rpx;
    padding-bottom: 23rpx;
}
.add-top-car image {
    width: 47rpx;
    height: 47rpx;
    margin-right: 13rpx;
}
/* 关闭虚拟键盘 */
.keyboardClose {
    height: 70rpx;
    /* background-color: #f7f7f7; */
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
}

.keyboardClose_btn {
    /* float: right; */
    line-height: 70rpx;
    font-size: 17px;
    border: none;
    outline: none;
    width: 125rpx;
    text-align: center;
    color: #4474D6;
}

.keyboardClose_btn::after{
   border-top: unset;
    border-bottom: unset;
}

/* 虚拟键盘-省缩写 */

/* 虚拟键盘-行 */
.keyboard-line {
    display: flex;
    align-items: center;
    justify-content: center;
}
.keyboard-item {
    padding-bottom: 25rpx;
}
/* 虚拟键盘-单个按钮 */
.keyboard-btn {
    /* color: #333333; */
    background: #fff;
    /* padding: 10rpx 0; */

    width: 61rpx;
    height: 87rpx;
    box-shadow: 0 2rpx 0 0 #999999;
    border-radius: 10rpx;
    text-align: center;
    margin: 6rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 虚拟键盘-删除按钮 */
.keyboard-del {
    /* position: absolute;
    bottom: 6rpx;
    right: 6rpx; */
    /* background: #A7B0BC; */
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 134rpx;
    height: 110rpx; */
}
.keybard-flex {
    justify-content: center;
}
.keyboard-del-font {
    font-size: 25px;
}

.blinker {
    animation-name: kf-blinker;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-duration: 1s;
    margin-left: 2rpx;
    width: 4rpx;
    height: 60rpx;
    border-radius: 4rpx;
    background: #00000090;
    
}

@keyframes kf-blinker {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
</style>